<template>
    <div id="Content">

    <div id="BackLink">
        <!-- <a th:href="/catalog/viewProduct(productId=${item.product.productId})">{{productId}}</a> -->
        <router-link :to="'/catalog/product?productId=' + productId">{{productId}}</router-link>
    </div>

    <div id="Catalog">

        <table>
            <tr>
                <!-- <td><img src="../../../static/images/dog4.gif"></td> -->
                <!-- <td><div v-html="productDescription"></div></td> -->
                <td v-html="productDescription"></td>
            </tr>
            <tr>
                <td><b>{{itemId}}</b></td>
            </tr>
            <tr>
                <td><font size="4"><b>{{attribute1}} {{productName}}</b></font></td>
            </tr>
            <tr>
                <td>{{productName}}</td>
            </tr>
            <tr>
            </tr>
            <tr>
                <td>{{listPrice}}</td>
            </tr>

            <tr>
                <!-- <td th:if="${item.quantity gt 0}">
                    <a class="Button" th:href="@{/cart/addCartItem(itemId=${item.itemId})}">Add to Cart</a>
                </td>
                <td th:if="${item.quantity le 0}">
                    <a class="Button" disabled="disabled" style="background-color: #444444">Sold Out</a>
                </td> -->
                <td><a class="Button" href="#">Add to Cart</a></td>
            </tr>
        </table>

    </div>
</div>
</template>

<script>
    export default {
        name: "Item",
        data(){
            return {
                productId: '',
                productDescription: '',
                itemId: '',
                attribute1: '',
                productName: '',
                listPrice: '',
                quantity: ''
            }
        },
        created()
        {
            const _this = this
            axios.get('http://localhost:8088/catalog/items/' + this.$route.query.itemId).then(function (resp) {
                _this.productId = resp.data.data.productId
                _this.productDescription = resp.data.data.productDescription
                _this.itemId = resp.data.data.itemId
                _this.attribute1 = resp.data.data.attribute1
                _this.productName = resp.data.data.productName
                _this.listPrice = resp.data.data.listPrice
                _this.quantity = resp.data.data.quantity
                console.log(resp.data.data.productDescription)
            })
        }
    }
</script>

<style scoped>
    @import "../../assets/css/jpetstore.css";
</style>